import React, {lazy, Suspense} from 'react';
import ReactDOM from 'react-dom';
import {HashRouter as Router, Route, Switch, Redirect} from 'react-router-dom';
import * as serviceWorker from './serviceWorker';
import './styles/reset.css'
import {useCreateGlobalState, GlobalContext} from './global';
import PageLoading from './components/page_loading';

interface RouteConfig {
  path: string,
  component: any
}

const routerConfig: Array<RouteConfig> = [
  {
    path: '/',
    component: lazy(() => import('./views/home')),
  },
];

function App() {
  const {state, setState} = useCreateGlobalState();  // 创建全局变量context
  return (
    <GlobalContext.Provider value={{state, setState}}>
      <Router>
        <Suspense fallback={<PageLoading/>}>
          <Switch>
            {routerConfig.map(item => (
              <Route exact path={item.path} key={item.path} component={item.component}/>
            ))}
            <Redirect to="/"/>
          </Switch>
        </Suspense>
      </Router>
    </GlobalContext.Provider>
  );
}

ReactDOM.render(
  <App/>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
process.env.NODE_ENV === 'production' && serviceWorker.register();
